import React from 'react';
import type { AccountInfo } from '../types/wechat';

interface Props {
  account: AccountInfo | undefined;
  onExport: () => void;
  onOpenWeChatPath: () => void;
  onOpenExportPath: () => void;
  onChangeExportPath: () => void;
  onCheckUpdate: () => void;
  onShowLog: () => void;
}

const SettingsPanel: React.FC<Props> = ({
  account,
  onExport,
  onOpenWeChatPath,
  onOpenExportPath,
  onChangeExportPath,
  onCheckUpdate,
  onShowLog,
}) => {
  if (!account) return <div>未选择账号</div>;
  return (
    <div className="settings-panel">
      <div style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 8 }}>
        选择要导出的账号：
        <span style={{ fontWeight: 'normal', marginLeft: 8 }}>{account.nickname}</span>
      </div>
      <div style={{ marginBottom: 8 }}>
        wechatDataBackup 版本：
        <span className="tag-green">{account.version}</span>
        <button className="btn-green" onClick={onCheckUpdate}>检查更新</button>
        <button className="btn-green" onClick={onShowLog}>日志</button>
      </div>
      <div style={{ marginBottom: 8 }}>
        进程PID：<span className="tag-green">{account.pid}</span>
      </div>
      <div style={{ marginBottom: 8 }}>
        微信软件版本：<span className="tag-green">{account.wechatVersion}</span>
      </div>
      <div style={{ marginBottom: 8 }}>
        微信文件存储路径：
        <span className="tag-green">{account.wechatPath}</span>
        <button className="btn-green" onClick={onOpenWeChatPath}>打开</button>
      </div>
      <div style={{ marginBottom: 8 }}>
        导出存储路径：
        <span className="tag-green">{account.exportPath}</span>
        <button className="btn-green" onClick={onOpenExportPath}>打开</button>
        <button className="btn-green" onClick={onChangeExportPath}>修改</button>
      </div>
      <div style={{ marginBottom: 8 }}>
        导出路径剩余存储空间：
        <span className="tag-green">{account.freeSpace}</span>
      </div>
      <div style={{ marginBottom: 8 }}>
        微信ID：<span className="tag-green">{account.wechatId}</span>
      </div>
      <div style={{ marginBottom: 8 }}>
        解密结果：<span className="tag-green">{account.decryptResult}</span>
      </div>
      <button className="btn-blue" onClick={onExport}>导出此账号数据</button>
    </div>
  );
};

export default SettingsPanel; 